<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <el-aside :width="aside_with" height="100%">
      <Aside :isCollapse="isCollapse"></Aside>
    </el-aside>

    <el-container style="height: 100%">
      <el-header style="text-align: right; font-size: 12px; height: 100%; border-bottom: darkgray 1px solid">
        <Header @doCollapse="doCollapse" :icon_code="icon_code"></Header>
      </el-header>

      <el-main style="height: 100%;">
<!--        <Main></Main>-->
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

const turn = false
const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const aside_with = ref("200px")
const isCollapse = ref(false)
const icon_code = ref("M896 192H128v128h768zm0 256H384v128h512zm0 256H128v128h768zM320 384 128 512l192 128z")
const tableData = ref(Array.from({ length: 20 }).fill(item))
function doCollapse(){
  isCollapse.value = !isCollapse.value
  if(isCollapse.value){
    aside_with.value = "64px"
    icon_code.value = "M128 192h768v128H128zm0 256h512v128H128zm0 256h768v128H128zm576-352 192 160-192 128z"
  }else{
    aside_with.value = "200px"
    icon_code.value = "M896 192H128v128h768zm0 256H384v128h512zm0 256H128v128h768zM320 384 128 512l192 128z"
  }
  // console.log(icon_name.value)
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  /* background-color: var(--el-color-primary-light-7); */
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  /* background: var(--el-color-primary-light-8); */
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
